<template>
	<statusBarVue title="社区" :isShowBar="true" :isShowLeft="true" />
	<view class="community-page" :style="pageHaveBarStyle">
		<view class="group btns">
			<view class="btn" :class="fid === '' ? 'active' : ''" @click="handleToTopic({ fid: '' })">
				<icon :class="'icon icon-all'" ></icon>
				<view>全部</view>
			</view>
			<view class="btn" :class="fid === item.fid ? 'active' : ''" v-for="(item, i) in communityModuleList"
				:key="'btn-' + i" @click="handleToTopic(item)">
				<icon :class="'icon ' + item.iconClass"></icon>
				<view>{{ item.name }}</view>
			</view>
		</view>
		<view class="group" :style="{ height: 'calc(' + pageHeighthaveBar + 'px - 10px - 70px - 12px )' }">
			<view class="community-content">
				<movable-area class="topic-page-movable-area">
					<view class="topic-page-group">
						<view class="topic-page-list"
							:style="{ height: 'calc(' + pageHeighthaveBar + 'px - 10px - 70px - 12px )' }">
							<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
								:up="mescrolTop" :down="mescrolDown" :fixed="false">
								<view v-for="(item, index) in topicList" :key="index" class="topic-page-item">
									<!-- 作者信息 -->
									<view class="author-group">
										<view class="author-info">
											<image class="user" :src="item.user.avatar" />
											<text class="user-name">{{ item.user.nick }}</text>
											<text class="edit-time">
												{{ handleTimeStrToTimeStamp(item.ts) }}
											</text>
											<view class="selected" v-if="item.essential">精</view>
											<!-- <view class="top" v-if="item">置顶</view> -->
										</view>
										<view class="operate" @click="open('popup')">
											<icon class="more"></icon>
										</view>
									</view>
									<!-- 内容 -->
									<view class="contents" @click.stop="handlefavorite(item)">
										<view class="tit">
											{{ item.title }}
										</view>
										<view class="content" v-for="(v, i) in item.contents" :key="'item-' + i">
											<view v-if="v.content_type === 0" class="text">{{ v.content }}</view>
											<view v-if="v.content_type === 1" class="imgs">
												<image :src="v.href" @click.stop="handlePreviewImage(v.href)" class="img" />
											</view>
										</view>
									</view>
									<!-- 操作图标 -->
									<view class="function-btns">
										<button class="btn" @click="handleShare" open-type="share">
											<icon class="icon icon-share"></icon>
											{{ item.favers }}
										</button>
										<view class="btn" @click="postTopicMarkGoodApi(item.id)">
											<icon :class="'icon ' + ((item.be_good) ? 'icon-like-active' : 'icon-like')">
											</icon>
											{{ item.goods }}
										</view>
										<view class="btn" @click="postTopicMarkBedApi(item.id)">
											<icon :class="'icon ' + ((item.be_bad) ? 'icon-loathe-active' : 'icon-loathe')">
											</icon>
											{{ item.bads }}
										</view>
										<view class="btn" @click="postAddFavoriteApi(item.id)">
											<icon
												:class="'icon ' + ((item.be_favor) ? 'icon-collect-active' : 'icon-collect')">
											</icon>
											{{ item.favers }}
										</view>
										<view class="btn" @click="handlefavorite(item)">
											<icon class="icon icon-comment"></icon>
											{{ item.ups }}
										</view>
									</view>
								</view>
							</mescroll-uni>
						</view>
					</view>

					<!-- 发表话题 -->
					<movable-view inertia direction="all" class="topic-page-movable-view" :x="viewInfo.right - 60"
						:y="viewInfo.height - 360" v-if="fid !== ''">
						<button class="push-topic-btn" @click="handleToAdd">
							<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
						</button>
					</movable-view>
				</movable-area>
			</view>
		</view>
		
		<!-- 操作 -->
		<uni-popup ref="popup" type="bottom" borderRadius="16px 16px 0 0" safeArea backgroundColor="#F3F3F5">
			<view class="popup operate-popup">
				<view class="popup-h operate-popup-h">
					<view class="tit">操作</view>
					<button class="close" @click="close('popup')">
						<uni-icons type="closeempty"></uni-icons>
					</button>
				</view>
				<view class="popup-b operate-popup-b">
					<scroll-view class="scroll-view" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view class="operate-popup-b-con">
							<view class="btn del">
								<view class="icon icon-del">
									<uni-icons type="trash-filled" size="30"></uni-icons>
								</view>
								<view>删帖</view>
							</view>
							<view class="btn choice">
								<view class="icon icon-choice">精</view>
								<view>加精</view>
							</view>
							<view class="btn up">
								<view class="icon">
									<uni-icons type="arrow-up" size="30"></uni-icons>
								</view>
								<view>置顶</view>
							</view>
							<view class="btn wx">
								<button open-type="share" plain @click="handleShare" class="btn-b">
									<view class="icon">
										<uni-icons type="weixin" size="30"></uni-icons>
									</view>
									<view>分享链接</view>
								</button>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import statusBarVue from '@/components/statusBar.vue';

import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

import {
	publics
} from '@/mixins/publics.js';

import {
	getForumsList,
	getCheckTopicsList,
	postAddFavorite,
	postTopicMarkGood,
	postTopicMarkBed,
	getForumsTopics
} from "@/utils/api"

export default {
	mixins: [publics, MescrollMixin],
	components: {
		statusBarVue
	},
	data() {
		return {
			communityList: [],
			communityModuleIconList: [
				'icon-comment',
				'icon-comment',
				'icon-comment',
				'icon-comment',
				'icon-comment',
				'icon-comment',
				'icon-comment',
				'icon-comment',
			],
			communityModuleList: [],
			fid: '',
			mescrolTop: {
				use: true
			},
			mescrolDown: {
				use: true,
				auto: false,
				mustToTop: true
			},
			topicList: []
		}
	},
	onShareAppMessage(){
		// 监听用户右上角的转发
	},
	onShareTimeline(){
		// 监听用户右上角的分享到朋友圈
	},
	onShow() {
		this.getForumsListApi();
		this.mescroll.triggerDownScroll();
	},
	methods: {
		// 查询论坛列表
		getForumsListApi() {
			getForumsList().then(res => {
				if (res.code === 200) {
					this.communityList = res.data.forums
					res.data.forums.map((item, index) => {
						item.iconClass = this.communityModuleIconList[index]
					});
					this.communityModuleList = res.data.forums;
				}
			})
		},

		// 查看话题列表
		handleToTopic(item) {
			const fid = item.fid;
			this.fid = fid;
			// uni.navigateTo({
			// 	url: fid ? `/homePages/topic/index?fid=${fid}` : `/homePages/topic/index`
			// });

			this.upCallback({
				num: 1,
				size: 10
			})
		},

		upCallback(page) {
			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条

			this.getCheckTopicsListApi(page);
		},
		reloadList() {
			this.mescroll.resetUpScroll();
		},
		// 查看详情
		handlefavorite(item) {
			uni.navigateTo({
				url: `/homePages/topic/details?topicId=${item.id}&showBtn=true&fid=${this.fid}`
			});
		},
		// 收藏
		postAddFavoriteApi(code) {
			postAddFavorite(code).then(res => {
				if (res.code === 200) {
					uni.showToast({
						title: '收藏成功！'
					});
					this.reloadList();
				}
			})
		},
		// 点赞
		postTopicMarkGoodApi(code) {
			postTopicMarkGood(code).then(res => {
				if (res.code === 200) {
					uni.showToast({
						title: '点赞成功！'
					});
					this.reloadList();
				}
			})
		},
		// 点踩
		postTopicMarkBedApi(code) {
			postTopicMarkBed(code).then(res => {
				if (res.code === 200) {
					uni.showToast({
						title: '操作成功！'
					});
					this.reloadList();
				}
			})
		},
		// 查询列表接口
		getCheckTopicsListApi(page) {
			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条

			const postData = {
				fid: this.fid,
				next_ts: pageNum - 1,
				page_size: pageSize
			};
			if (postData.next_ts === 0) {
				this.topicList = [];
			}

			if (this.fid === '') {
				getForumsTopics(postData).then(res => {
					if (res.code === 200) {
						if (postData.next_ts > 0) {
							this.topicList = this.topicList.concat(res.data.topics);
						} else {
							this.topicList = res.data.topics;
						}
						this.mescroll.endBySize(this.topicList.length, res.data.next_ts)
					}
				}).catch(data => {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			} else {
				getCheckTopicsList(postData).then(res => {
					if (res.code === 200) {
						if (postData.next_ts > 0) {
							this.topicList = this.topicList.concat(res.data.topics);
						} else {
							this.topicList = res.data.topics;
						}
						this.mescroll.endBySize(this.topicList.length, res.data.next_ts)
					}
				}).catch(data => {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			}
		},

		// 发表新的话题
		handleToAdd() {
			uni.navigateTo({
				url: `/homePages/topic/editingTopicForm?fid=${this.fid}`
			});
		},
		open(ref) {
			this.$refs[ref].open('bottom')
		},
		close(ref) {
			this.$refs[ref].close()
		}
	}
}
</script>

<style lang="scss">
.community-page {
	position: fixed;
	// top: 90px;
	left: 0;
	right: 0;
	z-index: 99;
	background: linear-gradient(to bottom, transparent 0%, white 20%, white 100%);

	&>.group {
		width: 94.67vw;
		margin: auto;

		.community-content {
			height: 100%;
			overflow: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: auto;

			.topic-page-movable-area {
				width: 100%;
				height: 100%;

				.topic-page-movable-view {
					width: auto;
					height: auto;

					.push-topic-btn {
						width: 49px;
						height: 49px;
						line-height: 49px;
						padding: 0;
						background: #22A366;
						color: #fff;
						border-radius: 100%;
					}
				}

				.topic-page-group {
					width: 100%;
					margin: auto;
					position: relative;


					.author-group {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 6px;

						.author-info {
							height: 30px;
							line-height: 30px;
							font-weight: 400;
							display: flex;
							align-items: center;
							flex-direction: row;

							.user {
								width: 26px;
								height: 26px;
								margin-right: 9px;
								border-radius: 26px;
							}

							.user-name {
								font-size: 12px;
								color: #1E1F23;
								margin-right: 11px;
							}

							.edit-time {
								font-size: 11px;
								color: #9B9B9B;
								margin-right: 4px;
							}

							.selected {
								width: 20px;
								height: 15px;
								background: #FFF1DE;
								border: 0.7px solid #FFE4BE;
								border-radius: 2.8px;
								font-size: 8.4px;
								color: #BA7500;
								line-height: 14px;
								text-align: center;
								margin-right: 4px;
							}

							.top {
								width: 28px;
								height: 15px;
								background: #EAF3FF;
								border: 0.7px solid #CBE1FF;
								border-radius: 2.8px;
								font-size: 8.4px;
								color: #2A5BC9;
								line-height: 14px;
								text-align: center;
							}
						}

						.operate {
							width: 12px;

							.more {
								width: 3px;
								height: 12px;
								background: url("/static/images/icon/more1.png") no-repeat 0 0;
								background-size: 100% 100%;
							}
						}
					}
				}
			}

			.contents {
				.tit {
					font-weight: bold;
					font-size: 16px;
					color: #1E1F23;
					line-height: 25px;
					margin-bottom: 3px;
				}


				.content {
					.text {
						font-weight: 400;
						font-size: 15px;
						color: #1E1F23;
					}

					.imgs {
						.img {
							width: 100px;
							height: 100px;
							border-radius: 4px;
							margin-right: 4px;
						}
					}

				}

			}

			.function-btns {
				margin-top: 8px;
				color: #5F6270;
				height: 30px;
				line-height: 30px;
				display: flex;
				justify-content: space-between;

				.btn {
					font-size: 16px;
					margin: 0;
					border: none;
					background: none;
					padding: 0;
					line-height: inherit;
					border-radius: inherit;

					&:after {
						border: none;
					}
				}

				.icon {
					width: 20px;
					height: 20px;
					vertical-align: text-top;
					margin-right: 2px;

					&-share {
						background: url("/static/images/icon/21.png") no-repeat 0 0;
						background-size: 100% 100%;
					}

					&-like {
						background: url("/static/images/icon/6.png") no-repeat 0 0;
						background-size: 100% 100%;

						&-active {
							background: url("/static/images/icon/6-a.png") no-repeat 0 0;
							background-size: 100% 100%;
						}
					}

					&-loathe {
						background: url("/static/images/icon/5.png") no-repeat 0 0;
						background-size: 100% 100%;

						&-active {
							background: url("/static/images/icon/5-a.png") no-repeat 0 0;
							background-size: 100% 100%;
						}
					}

					&-collect {
						background: url("/static/images/icon/3.png") no-repeat 0 0;
						background-size: 100% 100%;

						&-active {
							background: url("/static/images/icon/3-a.png") no-repeat 0 0;
							background-size: 100% 100%;
						}
					}

					&-comment {
						background: url("/static/images/icon/1.png") no-repeat 0 0;
						background-size: 100% 100%;
					}
				}
			}

			.topic-page-list {
				width: 100%;
				height: 100%;
				// position: absolute;
				// overflow: auto;
			}

			.topic-page-item {
				background-color: #fff;
				margin-bottom: 10px;
				padding: 12px;
				border-radius: 10px;
			}





		}
	}

	&>.btns {
		// display: flex;
		// justify-content: space-around;
		// align-items: center;
		display: -webkit-box;
		margin: 10px auto 12px;
		padding-bottom: 8px;
		overflow-x: auto;

		&>.btn {
			width: 21.87vw;
			height: 66px;
			border: 1px solid #ddd;
			border-radius: 8px;
			text-align: center;
			color: #B2B2B3;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			align-content: center;
			background-color: #fff;
			font-size: 12px;
			margin-right: 10px;

			&.active {
				border: 2px solid #22A366;
				font-weight: bold;
			}

			&:last-child {
				margin-right: 0;
			}

			&>view {
				width: 100%;
			}

			.icon-all {
				width: 39.86rpx;
				height: 39.86rpx;
				background: url("/static/images/icon/all.png") no-repeat 0 0;
				background-size: 100% 100%;
			}

			.icon-comment {
				width: 22px;
				height: 22px;
				background: url("/static/images/icon/1.png") no-repeat 0 0;
				background-size: 100% 100%;
				margin-bottom: 4px;
			}
		}
	}

	.popup {
		height: 42vw;
		background: #F3F3F5;
		border-radius: 16px 16px 0 0;
		padding: 14px 16px;
	
		&-h {
			width: 100%;
			height: 27px;
			line-height: 27px;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.tit {
				font-weight: 600;
				font-size: 16px;
				color: #131315;
			}
	
			.close {
				width: 27px;
				height: 27px;
				line-height: 27px;
				border-radius: 100%;
				background: #DCDCDE;
				color: #0F0F10;
				margin: initial;
				padding: 0;
				text-align: center;
			}
		}
	
		&-b {
			padding: 27px 0;
	
			.scroll-view {
				height: 120px;
			}
	
			.operate-popup-b-con {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: row;
				align-items: flex-start;
	
				.btn {
					height: 80px;
					text-align: center;
					margin: 0 12px;
					display: inline-block;
	
					.btn-b {
						border: none;
						margin: 0;
						padding: 0;
						line-height: inherit;
						font-size: 16px;
					}
				}
			}
	
			.icon {
				width: 53px;
				height: 53px;
				line-height: 53px;
				background: #FFFFFF;
				text-align: center;
				padding: 0;
				border-radius: 100%;
				font-size: 20px;
				color: #000;
				margin: 0 auto 6px;
	
	
				.icon-choice {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: #19191C;
				}
			}
		}
	}
}
</style>